<template>
    <div class="body">
        <header class="header_background">
            <div class="header_icon"></div>
            <div class="herder_title">银联商务</div>
        </header>
        <LoginInput  style="padding-top: 10px;height: 54px" @inputChange="loginInputData" :inputValue="inputValue" :placeholder="placeholderPhone" ></LoginInput>
        <!--<div class="showList">-->
        <!--<LoginCodeInput :placeholder="placeholderCode" style="padding-top: 5px;padding-bottom: 5px" :inputValue="CodeInputValue" @inputChange="loginCodeInputData"></LoginCodeInput>-->
        <!--&lt;!&ndash;<div class="getLoginCode" @click="countDown" :class="{disabled: !canClick}">{{getLoginCode}}</div>&ndash;&gt;-->
        <!--<div class="getCode" @click="getPhoneCode" :class="{disabled: !canClick}">{{getCode}}</div>-->
        <!--</div>-->
<!--        <div @click="goTo" >
            <MyButton :ButtonNext="ButtonNext" >
            </MyButton>
        </div>-->
        <com-input-button
            :disabled="authCodeDisabled"
            @btn-click="sendAuthCode"
        ></com-input-button>
        <com-button btnClass="next-btn"
                    @btn-click="goTo"
                    :disabled="btnDisabled"
        >下一步</com-button>
        <div @click="testData">
            test
        </div>
    </div>
</template>

<script>
    import MyButton from '@/components/MyButton.vue'
    import LoginInput from '@/components/LoginInput.vue'
    import LoginCodeInput from '@/components/LoginCodeInput.vue'
    import ComButton from '@/components/com-button.vue'
    import ComInputButton from '@/components/com-input-button.vue'
    import router from '@/router'
    import axios from "axios"
    import { mapState,mapMutations,mapActions } from 'vuex'
    import { LOGIN_NEXT_BUTTON_CHECK, AUTH_CODE_BUTTON_CHECK, LOGIN_SEND_AUTH_CODE } from '../store/types'
    export default {
        name: "login",
        components: {
            MyButton,
            LoginInput,
            LoginCodeInput,
            ComButton,
            ComInputButton
        },
        data(){
            return{
                ButtonNext:"提交",
                placeholderPhone:'请输入手机号码',
                placeholderCode:'请输入验证码',
                bestDATA:[],

            }
        },
        computed: {
            ...mapState('login',['inputValue','canClick','codaData','getCode','CodeInputValue',
                'btnDisabled', 'authCodeDisabled','lastData'])
        },
        methods:{
            testData(){
                console.log(this.lastData.length)

                // this.lastData.AREADetail.push(this.bestDATA)
            },
            ...mapMutations('login',['getInputValue','countDownData','getCodeInputValue', LOGIN_NEXT_BUTTON_CHECK,
                AUTH_CODE_BUTTON_CHECK]),
            ...mapActions('login', [LOGIN_SEND_AUTH_CODE]),
                loginInputData(data){
                this.getInputValue(data)
                this.LOGIN_NEXT_BUTTON_CHECK()
                this.AUTH_CODE_BUTTON_CHECK()
            },
            loginCodeInputData(data){
              this.getCodeInputValue(data)
                this.LOGIN_NEXT_BUTTON_CHECK()
            },
            getPhoneCode(){
                // 获取手机号码并获取验证码
                // console.log(this.inputValue)
                // console.log(this.CodeInputValue)
                this.countDownData()
            },
            sendAuthCode () {
               this.LOGIN_SEND_AUTH_CODE()
            },
            goTo(){
                router.push( 'home' )

            }
        }
    }
</script>

<style scoped>

    .header_background {
        padding-top: 40px;
        background: url(../assets/login/background.png) no-repeat;
        height: 200px;
        background-size: 100% 100%;
        text-align: center;
    }
    .header_icon {
        margin: 0px auto;
        background: url(../assets/login/yinlianshangwulogo.png) no-repeat;
        width: 95px;
        height: 95px;
        background-size: 100% 100%;
    }
    .herder_title {
        margin-top: 12px;
        font-size: 18px;
        color: #FFFFFF;
        font-family: "微软雅黑";
    }
    .showList {
        position: relative;
        width: 100%;
        height: 3.125rem;
        line-height: 3.125rem;
        display: flex;
        background-color: #fff;
        /*margin-top: 6px;*/
        border-bottom: 1px solid #e0e3ea;
        font-size: 0.9rem;

    }
    .getCode {
        width: 7rem;
        height: 2.2rem;
        font-size: .75rem;
        line-height: 2.2rem;
        text-align: center;
        color: #fff;
        border-radius: .5rem;
        /*margin: auto 10px auto 0;*/
        background-color: #26a2ff;
        position: absolute;
        right: 0.8125rem;
        top: 0.8rem;
    }
    .next-btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        color: #ffffff
    }
</style>